<template>
    <a-modal
            :width="800"
            :visible="visible"
            :confirmLoading="confirmLoading"
            @ok="handleSubmit"
            @cancel="handleCancel"
            cancelText="关闭"
    >
        <a-descriptions :title="formInfo.title">
            <a-descriptions-item label="姓名">{{ formInfo.name }}</a-descriptions-item>
            <a-descriptions-item label="编码">{{ formInfo.shorter }}</a-descriptions-item>
            <a-descriptions-item label="学校名称">{{ formInfo.schname }}</a-descriptions-item>
            <a-descriptions-item label="班级名称">{{ formInfo.className }}</a-descriptions-item>
            <a-descriptions-item label="身份证号">{{ formInfo.identity }}</a-descriptions-item>
            <a-descriptions-item label="出生日期">{{ formInfo.birthday }}</a-descriptions-item>
            <a-descriptions-item label="性别">{{ this.$sysDictFilter(formInfo.sex, 'sex') }}</a-descriptions-item>
            <a-descriptions-item label="年龄">{{ formInfo.age }}</a-descriptions-item>
            <a-descriptions-item label="家庭住址">{{ formInfo.address }}</a-descriptions-item>
            <a-descriptions-item label="民族">{{ formInfo.remark }}</a-descriptions-item>
        </a-descriptions>
        <div class="qrv">
        <div id="qr-section">
            <vue-qr ref="qrcode" :text="formInfo.shorter" :size="size" level="H" ></vue-qr>
            <div class="qrcode-text">
                <p>{{ formInfo.name }}/{{ this.$sysDictFilter(formInfo.sex, 'sex') }}/{{ formInfo.className }}/{{ formInfo.shorter }}</p>
            </div>

        </div>
        <a ref="downloadLink" style="display: none;"></a>
        <button @click="downloadQrcode">下载二维码</button>
        </div>
        <template slot="footer">
            <a-button @click="handleCancel" style="margin-right: .8rem">关闭</a-button>
        </template>
    </a-modal>
</template>

<script>
    import pick from 'lodash.pick'
    import { getAction } from '@/api/manage'
    import VueQr from 'vue-qr';
    import html2canvas from 'html2canvas'

    export default {
        name: 'EyeStudentQrcode',
        components: {VueQr},
        data () {
            return {
                visible: false,
                size:512,
                confirmLoading: false,
                formInfo: {},
                url: {
                    saveInfo: '/system/eyeStudent/save',
                    getInfo: '/system/eyeStudent/info'
                }
            }
        },
        created () {
        },
        methods: {
            show (record) {
                this.formInfo = Object.assign({}, record)
                if (this.formInfo.id) {
                    getAction(this.url.getInfo, { 'id': record.id }).then(res => {
                        this.$nextTick(() => {
                            this.formInfo = (pick(res.result.data
                                , 'id'
                                , 'name'
                                , 'dingdingUnionId'
                                , 'classId'
                                , 'className'
                                , 'schid'
                                , 'schname'
                                , 'years'
                                , 'createTime'
                                , 'departCode'
                                , 'remark'
                                , 'shorter'
                                , 'sex'
                                , 'age'
                                , 'identity'
                                , 'birthday'
                                , 'address'
                            ))
                        })
                    })
                }
                this.visible = true
            },
            // 确定
            handleSubmit () {
                this.visible = false
            },
            // 关闭
            handleCancel () {
                this.close()
            },
            close () {
                this.visible = false
            },
            downloadQrcode() {
                window.pageYoffset = 0
                document.documentElement.scrollTop = 0
                document.body.scrollTop = 0
                const canvasBox = document.getElementById('qr-section')
                html2canvas(canvasBox).then(canvas => {
                    const dataURL = canvas.toDataURL('image/jpg')
                    // 下载
                    this.$refs.downloadLink.href = dataURL;
                    this.$refs.downloadLink.download = this.formInfo.name+'.png';
                    this.$refs.downloadLink.click();
                })

                // 设置下载链接的href属性和download属性（如果需要下载功能）

            }
        }
    }
</script>
<style scoped>
    .qrv{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 200px;
        margin: 10px auto;

    }
</style>
